<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传附件</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->

<link href="${APP_PATH }/static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="${APP_PATH }/static/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/inputfile/fileinput.css" />
</head>
<body>
	<div class="container kv-main">
	   <div class="row">
	   	  <form enctype="multipart/form-data" method="post">
	      	<input id="myFile" type="file" name="file" class="file" multiple data-min-file-count="1">
	      </form>
	   </div>
	 </div>
</body>

<script type="text/javascript" src="${APP_PATH }/static/jquery/jquery-3.2.1.min.js"></script>
<script src="${APP_PATH }/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/inputfile/fileinput.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/inputfile/fileinput_zh.js"></script>

<script type="text/javascript">
	$("#myFile").fileinput({
		language: 'zh', //设置语言
		required:true, //必须上传附件
		uploadUrl : "emp/photo",//上传图片的url
	    allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
	    browseClass: 'btn btn-default',
	    overwriteInitial : false,
	    maxFileSize : 1000,//上传文件最大的尺寸
	    initialCaption: "请上传附件",//文本框初始话value
	    //allowedFileTypes: ['image', 'video', 'flash'],
	    allowedPreviewTypes: ['image'], //预览类型
	    slugCallback : function(filename) {
	        return filename.replace('(', '_').replace(']', '_');
	    }
	});
   $('#myFile').on('fileuploaded', function(event, data, previewId, index) {
	   var form = data.form, files = data.files, extra = data.extra,
       response = data.response, reader = data.reader;
	   console.log('File uploaded triggered');
   });
</script>
</html>